<template>
	<view>
		<uni-nav-bar title="交易所" leftIcon="back" @clickLeft="$tab.back()" :border="false" :statusBar="true"
			:fixed="true" backgroundColor=" " color="#fff">
		</uni-nav-bar>

		<image src="https://file.fulewanjia.com/fulewanjia/profile/preImages/mine/banner.png" class="banner" mode="">
		</image>

		<view class="px-32 text-28">
			<view v-if="user.verifyState!=1">
				<view class="py-40 flex items-center justify-between" @click="routeSkip('实名认证')">
					<view>
						实名认证
					</view>
					<view>
						<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
					</view>
				</view>
				<u-line color="#F0F0F0"></u-line>
			</view>
			<view>
				<view class="py-40 flex align-center justify-between">
					<view>
						交易所信息同步
					</view>
					<view class="text-gray flex items-center">
						<u-button v-if="user.toExchange!=1" @click="information" class="synchronization" text="点击信息同步">
						</u-button>
						<view v-if="user.toExchange==1">
							已同步
						</view>
						<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
					</view>
				</view>
				<u-line color="#F0F0F0"></u-line>
			</view>
			<view @click="routeSkip('交易所')">
				<view class="py-40 flex items-center justify-between">
					<view>
						交易所
					</view>
					<view class="text-gray flex items-center">
						<view>
							点击跳转
						</view>
						<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
					</view>
				</view>
				<u-line color="#F0F0F0"></u-line>
			</view>
			<view @click="onchange()">
				<view class="py-40 flex items-center justify-between">
					<view>
						交易提交仓单
					</view>
					<view>
						<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
					</view>
				</view>
				<u-line color="#F0F0F0"></u-line>
			</view>
			<view @click="routeSkip('交易记录')">
				<view class="py-40 flex items-center justify-between">
					<view>
						交易记录
					</view>
					<view>
						<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
					</view>
				</view>
				<u-line color="#F0F0F0"></u-line>
			</view>
		</view>

		<view class="cssdeer">
			<u-popup :show="deal" mode="center" :closeOnClickOverlay="true" @close="deal=false">
				<view class="box-2 px-32 py-32 relative">
					<view class="text-36 font-700 text-center">
						提交仓单
					</view>

					<u-icon name="close" size="24" class="close" @click="deal = false"></u-icon>

					<view class="mt-32 flex items-center justify-between">
						<text class="text1">今日已提交{{statistics.date || 0}}手</text>
						<text class="text2" v-if="statistics.shengyu!=-1">(剩余可提交{{statistics.shengyu || 0}}手)</text>
					</view>

					<u--input :adjustPosition="false" class="mt-48" type="number" placeholder="请输入手数" border="surround"
						v-model="value"></u--input>
					<view class="mt-20">
						<u--text text="选择提仓货币" bold color="#333" size="14"></u--text>
						<view class="flex justify-between items-center pt-20 pb-20" @click="storeRRLIndex = index"
							v-for="(item, index) in storeReturnRateList" :key="index"
							:style="{ borderBottom: `${index < storeReturnRateList.length - 1 ? '2rpx solid #F0F0F0' : ''}` }">
							<u--text :text="item.name" size="14" color="#333"></u--text>
							<view class="flex justify-around image-40 border-2-gray round"
								:class="storeRRLIndex == index ? 'all_active' : ''">
								<u-icon name="checkbox-mark" color="#fff" size="10"></u-icon>
							</view>
						</view>
					</view>

					<view class="mt-48">
						<u--text class="mt-48" :text="storeReturnRateList[storeRRLIndex].introduce" size="12"
							color="#DF2E2C"></u--text>
					</view>

					<view class="box-3 text-center text-FFF text-32" @click="submit()">
						提交
					</view>
				</view>
			</u-popup>
		</view>

		<u-popup :show="pay_password" @close="pay_password = false,payPassword='' " mode="center" :round="20">
			<view class="p-48">
				<view class="pay_title">
					<text>请输入支付密码</text>
				</view>
				<view class="flex justify-around mt-28">
					<u-code-input v-model="payPassword" :maxlength="6" dot :focus="true"></u-code-input>
				</view>
				
				<view class="mt-32 text-FFF round-12 text-center py-20" style="background-color: #E2382B;" @click="confirm()">
					确认
				</view>
			</view>
		</u-popup>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deal: false,
				value: "",
				user: this.$store.getters.userInfo,
				statistics: '',
				pay_password: false,
				payPassword: '',
				orderLock: true, //抢单防止多次提交
				storeReturnRateList: [{
					name: '转化鹿票 + 鹿贝',
					id: 0,
					introduce: '1手 = 70鹿贝+30转化鹿票+6鹿贝手续费'
				}, {
					name: '可交易鹿票',
					id: 1,
					introduce: '1手 = 100可交易鹿票+6鹿贝手续费'
				}],
				storeRRLIndex: 0,
			};
		},
		onLoad() {},
		onShow() {
			this.getAppUser()
		},
		methods: {
			//获取用户信息
			getAppUser() {
				this.$Api.user.getCangdanNum().then((res) => {
					this.statistics = res
				})
			},
			submit() {
				if (this.value > 0 && this.value.indexOf('.') == -1) {
					if ((this.statistics.shengyu || 0) == 0) {
						uni.$u.toast('今日暂无可提交数量')
						return false
					}
					if (this.statistics.shengyu != -1 && this.value > (this.statistics.shengyu || 0)) {
						uni.$u.toast('超过可提交数量')
						return false
					}
					// 判断余额是否充足
					this.$Api.user.placeifbalance({
						num: this.value,
						istype: this.storeReturnRateList[this.storeRRLIndex].id
					}).then((res) => {
						console.log(res, '提交')
						this.deal = false
						this.pay_password = true //余额充足开始支付
					}).catch((err) => {
						this.value = ""
						this.deal = false
					})
				} else {
					if (this.value == 0) {
						return false
					} else {
						uni.$u.toast('请输入正确交易手数')
						return false
					}
				}
			},
			//提交仓单
			confirm() {
				if (!this.payPassword || this.payPassword.length < 6) {
					uni.$u.toast('请输入支付密码')
					return false
				}
				if (this.orderLock) {
					this.orderLock = false
					this.$Api.user.placeReceiveOrder({
						mobile: this.user.phonenumber,
						num: this.value,
						payPassword: this.payPassword,
						istype: this.storeReturnRateList[this.storeRRLIndex].id
					}).then((res) => {
						if (res.code == 200) {
							this.orderLock = true
							this.getAppUser()
							this.$modal.msg('提交成功')
							this.pay_password = false
							this.value = ""
						} else {
							this.orderLock = true
							this.$modal.msg(res.msg)
						}
					}).catch(() => {
						this.orderLock = true
					})
				}
			},
			onchange() {
				if (this.user.verifyState != 1) {
					this.$modal.msg('请先完成实名认证')
					return false
				}
				if (this.user.toExchange != 1) {
					uni.$u.toast('请先同步交易所后才可操作')
					return false
				}
				this.deal = true
			},
			//交易所信息同步
			information() {
				if (this.user.verifyState != 1) {
					this.$modal.msg('请先完成实名认证')
					return false
				}
				this.$Api.user.placeLoginPlace({
					mobile: this.user.phonenumber,
					truename: this.user.realName,
					password: null,
				}).then((res) => {
					if (res.code = 200) {
						this.$modal.msg('信息同步成功')
						this.getAppUser()
					} else {
						this.$modal.msg(res.msg)
					}
				})
			},
			routeSkip(name) {
				switch (name) {
					case '实名认证':
						this.$tab.nav(
							`/pages/mine/realPerson/index`
						)
						break
					case '交易所':
						if (this.user.verifyState != 1) {
							this.$modal.msg('请先完成实名认证')
							return false
						}
						if (this.user.toExchange != 1) {
							uni.$u.toast('请先同步交易所后才可操作')
							return false
						}
						this.$tab.nav(`/pages/common/webview/index?url=https://ffjy.jjyyxh.cn/#/?time=${new Date().getTime()}&title=交易所`)
						break
					case '交易记录':
						if (this.user.verifyState != 1) {
							this.$modal.msg('请先完成实名认证')
							return false
						}
						this.$tab.nav(`/pages/mine/exchange/record`)
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all_active {
		background-color: #E2382B !important;
		border: transparent !important;
	}

	/deep/ .u-button {
		height: 50rpx !important;
		background-color: #DF2E2C !important;
		color: #fff !important;
		border-radius: 15rpx !important;
		border: none !important;
	}

	.banner {
		width: 100%;
		height: 392rpx;
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.box-1 {
		height: 16rpx;
		background: #F8F8F8;
	}

	.cssdeer {
		/deep/ .u-popup__content {
			background: transparent;
		}
	}

	.box-2 {
		width: 600rpx;
		background: linear-gradient(180deg, #FDEFDE 0%, #FFFFFF 45%);
		border-radius: 32rpx;

		.close {
			position: absolute;
			right: 32rpx;
			top: 32rpx;
		}

		.box-3 {
			width: 400rpx;
			height: 88rpx;
			background: #FD212C;
			border-radius: 12rpx;
			margin: 48rpx auto 20rpx;
			line-height: 88rpx;
		}

		.text1 {
			font-weight: 600;
			font-size: 28rpx;
			color: #333;
		}

		.text2 {
			font-size: 24rpx;
			color: #999;
		}
	}
</style>